<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-12 16:41:13
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-02-20 10:23:17
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\basicInformation\skuManage\skuCategory\components\addModifPop.vue
-->
<template>
  <pb-popup v-model="isShow" :title="`${skuForm.skuClassId ? '编辑' : '新增'}SKU类别`" @cancelFn="offPopup"
    @confirmFn="onSave" Width="480">
    <div v-loading="loading">

      <div class="flex justify-between">
        <el-form-item label="类别编码：" style="width: 200px">
          {{ skuForm.skuClassCode }}
        </el-form-item>
        <el-form-item label="匹配SPU">
          <el-switch v-model="skuForm.isMatchSpu" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </div>
      <el-form :model="skuForm" label-width="auto" label-position="top" ref="ruleFormRef" :rules="rules">
        <el-form-item label="类别名称" prop="skuClassName">
          <pb-input v-model.trim="skuForm.skuClassName" maxlength="16" placeholder="请输入类别名称" width="432px"></pb-input>
        </el-form-item>
        <!-- <el-form-item label="父级类别" prop="parentSkuClassCode">
        <pb-tree-select v-model="skuForm.parentSkuClassCode" :Data="skuTreeData" width="432px"
          :defaultProps="{ children: 'children', label: 'skuClassName', value: 'skuClassCode' }" />
      </el-form-item> -->
        <el-form-item label="备注">
          <el-input v-model.trim="skuForm.skuClassDesc" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100"
            show-word-limit type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </div>
  </pb-popup>
</template>

<script setup lang="ts">
import { getSkuCode, addSkuClass, setSkuClass, getCheckSkukClass } from '@/api/Sku'
import { createMessage } from '@/Public-UIlibrary/pb-message/method';

const emits = defineEmits(['refresh'])
const isShow = ref(false);
const loading = ref(false);

const skuTreeData = ref([{
  skuClassName: '全部',
  children: [],
  skuClassCode: "001",
  skuClassLevel: 1,
}])

const formOrigin = () => ({
  skuClassName: null,
  skuClassCode: null,
  skuClassDesc: null,
  parentSkuClassCode: "001",
  isMatchSpu: 1,
});

let skuForm = ref(formOrigin());

const rules = reactive({
  skuClassName: [
    { required: true, message: "此项必填", trigger: "blur,change" },
    {
      validator(rule, value, callback) {
        checkName(value).then(res => {
          if (res) {
            return callback('类别名称已存在')
          } else {
            callback()
          }
        })
      }
    }
  ],

});

const showFn = (data) => {
  isShow.value = true;
  if (data) {
    skuForm.value = data
    console.log(skuForm.value)
  }
};
const checkName = (val) => {
  return new Promise<void>((resolve, reject) => {
    if (val) {
      let skuClassId = skuForm.value.skuClassId ? skuForm.value.skuClassId : null
      getCheckSkukClass({ skuClassName: val, skuClassId }).then(res => {
        if (res.code == 2000) {
          if (res.data.skuClassNameExist) {
            resolve(true)
          } else {
            resolve(false)
          }
        }
      })
    }
  })
}

const ruleFormRef = ref(null);
const onSave = async () => {
  await ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log(skuForm.value, 78787)
      if (skuForm.value.skuClassId) {
        setSkuClassApi()
      } else {
        addSkuClassApi()
      }
    }
  });
};

// 新增
const addSkuClassApi = () => {
  loading.value = true
  return new Promise<void>((resolve, reject) => {
    let { skuClassCode, parentSkuClassCode, ...args } = { ...skuForm.value }
    addSkuClass(args).then(res => {
      loading.value = false
      if (res.code == 2000) {
        createMessage({
          message: '添加成功'
        })
        isShow.value = false
        emits("refresh")
      }
    })
  })
}
// 编辑
const setSkuClassApi = () => {
  loading.value = true
  return new Promise<void>((resolve, reject) => {
    let { skuClassId, skuClassDesc, isMatchSpu, skuClassName } = { ...skuForm.value }
    setSkuClass({ skuClassId, skuClassDesc, isMatchSpu, skuClassName }).then(res => {
      loading.value = false
      if (res.code == 2000) {
        createMessage({
          message: '编辑成功'
        })
        isShow.value = false
        emits("refresh")
      }
    })
  })
}

// 关闭弹窗重置表单
const offPopup = () => {
  ruleFormRef.value.resetFields();
  skuForm.value = formOrigin();
};

defineExpose({ showFn });
</script>

<style lang="scss" scoped>
.name-tag-box {
  width: 98%;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);

  .common-name {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;

    .common {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 24px;
    }

    .name {
      padding: 2px 8px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid var(--pb-color-primary);
      font-size: 14px;
      color: var(--pb-color-primary);
      line-height: 22px;
      text-align: center;
    }
  }
}
</style>
